<template>
<div class="search-car" @mouseenter.stop="toggleClear($event,true)" @mouseleave.stop="toggleClear($event,false)">
    <Select
        v-model="keyword"
        loading-text="查询中..."
        placeholder="输入车牌号码或车架号进行搜索"
        filterable
        :clearable="true"
        remote
        :remote-method="search" 
        @on-change="checkKeyword"
        @on-query-change="queryChange"
        :loading="loading">
        <Option v-for="(item, index) in resultList" :value="item.id+'/'+item.plateNo+'/'+item.VINCode+'/'+item.plateColor+'/'+item.vehicleType" :key="index">{{item.label}}</Option>
    </Select>
    <div class="search-car-icon" v-show="clearIcon == false">
        <Icon type="ios-search-strong"></Icon>
    </div>
</div>
</template>

<script>
    export default {
        data(){
            return {
                loading: false,
                id: '',
                keyword: '',
                queryTime: '',
                resultList: [],
                list: [],
                clearIcon: false,
            }
        },
        mounted() {
            this.init();
        },
        methods: { 
            init() {
                this.id = this.$utils.Storage.getObj('account').fleet._id;
            },
            search (query) {
                if(query !== '') {
                    clearTimeout(this.queryTime);
                    this.queryTime = setTimeout(() => {
                        this.loading = true;
                        this.list = [];
                        this.resultList = [];
                        this.$ajax('searchCar',{
                            fleet_id: this.id,
                            keyword: query
                        },(data)=>{
                            var list = data.rows;
                            for(let i=0;i<list.length;i++){
                                this.list.push({
                                    id: list[i]._id,
                                    plateNo: list[i].plateNo || '',
                                    VINCode: list[i].VINCode || '',
                                    label: list[i].plateNo + ' | ' + list[i].VINCode,
                                    plateColor:list[i].plateColor || '',
                                    vehicleType:list[i].vehicleType || ''
                                })
                            }
                            this.resultList = this.list.filter(
                                item => (item.plateNo.toLowerCase().indexOf(query.toLowerCase()) > -1 || item.VINCode.toLowerCase().indexOf(query.toLowerCase()) > -1)
                            );
                            this.loading = false;
                        },(error)=>{
                            console.log(error);
                            this.loading = false;
                        })
                    }, 1000);
                }
                else this.resultList = [];
            },
            queryChange(val) {
                if(val == '') {
                    this.keyword = '';
                    this.clearIcon = false;
                }
            },
            checkKeyword(str){
                let obj = {
                    vehicleId:str.split('/')[0],
                    plateNo:str.split('/')[1],
                    VINCode:str.split('/')[2],
                    plateColor:str.split('/')[3],
                    vehicleType:str.split('/')[4]
                }
                console.log(obj);
                this.$emit('setKeyword',obj);
            }, 
            toggleClear(e,state) {
                if(this.keyword) this.clearIcon = state;
            },
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    .search-car{
        position: relative;
    }

    .search-car-icon{
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 30px;
        text-align: center;
        line-height: 42px;
        font-size: 16px;
        z-index: 3;
        color: #80848f;
    }
</style>